<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仓库设置</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
        body{

        }
        /*中部搜索框样式*/
        .el-select .el-input {
            width: 130px;
        }

        .input-with-select .el-input-group__prepend {
            background-color: #fff;
        }

        /*分页文字提示*/
        .tips {
            text-align: left;
            font-size: 16px;
            color: #606266;
            line-height: 40px;
        }

        .tips span {
            padding: 0 5px;
        }

    </style>
</head>
<body>
<div id="app">
    <!--上半部分的查询表单-->
    <el-form :inline="true" :model="wareNoAndTime" class="demo-form-inline" ref="wareNoAndTime" style="padding-top: 10px">
        <el-form-item label="仓库名称">
            <el-select v-model="wareNoAndTime.wareNo" placeholder="请选择仓库" >
                <div v-for="item in wares">
                    <el-option v-bind:label="item.wareName" v-bind:value="item.wareNo"></el-option>
                </div>

            </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
            <div class="block">
                <el-date-picker
                        v-model="wareNoAndTime.date"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </div>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit()">查询</el-button>
            <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
    </el-form>

    <!--中部的新增按钮 以及 右侧的搜索框-->
    <el-row type="flex" class="row-bg" justify="space-between" style="padding-top: 10px">
        <el-col :span="6">
            <el-button type="primary" plain icon="el-icon-circle-plus-outline" @click="openFormDialog">新增仓库</el-button>
        </el-col>

        <!-- 新增仓库对话框Form -->
        <el-dialog title="新增仓库" :visible.sync="dialogFormVisible">
            <el-form ref="ware" :model="ware" label-width="80px">
                <el-form-item label="仓库编号">
                    <el-input v-model="ware.wareNo"></el-input>
                </el-form-item>
                <el-form-item label="仓库名称">
                    <el-input v-model="ware.wareName"></el-input>
                </el-form-item>
                <el-form-item label="负责人">
                    <el-select v-model="ware.person" placeholder="请选择负责人">
                        <div v-for="item in users">
                            <el-option v-bind:label="item.userName" v-bind:value="item.userName"></el-option>
                        </div>
                    </el-select>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="ware.telephone"></el-input>
                </el-form-item>
                <el-form-item label="详细地址">
                    <el-input v-model="ware.address"></el-input>
                </el-form-item>
                <el-form-item label="经纬度">
                    <el-input v-model="ware.place"></el-input>
                </el-form-item>
                <el-form-item label="仓库详情">
                    <el-input type="textarea" v-model="ware.details"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onAdd">立即创建</el-button>
                    <el-button @click="cancelbtn">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>


    </el-row>
    <el-dialog title="修改仓库" :visible.sync="dialogOtherFormVisible">
        <el-form ref="ware" :model="ware" label-width="80px">
            <el-form-item label="仓库编号">
                <el-input v-model="ware.wareNo"></el-input>
            </el-form-item>
            <el-form-item label="仓库名称">
                <el-input v-model="ware.wareName"></el-input>
            </el-form-item>
            <el-form-item label="负责人">
                <el-select v-model="ware.person" placeholder="请选择负责人">
                    <div v-for="item in users">
                        <el-option v-bind:label="item.userName" v-bind:value="item.userName"></el-option>
                    </div>
                </el-select>
            </el-form-item>
            <el-form-item label="联系电话">
                <el-input v-model="ware.telephone"></el-input>
            </el-form-item>
            <el-form-item label="货区数量">
                <el-input v-model="ware.cargoNum"></el-input>
            </el-form-item>
            <el-form-item label="详细地址">
                <el-input v-model="ware.address"></el-input>
            </el-form-item>
            <el-form-item label="经纬度">
                <el-input v-model="ware.place"></el-input>
            </el-form-item>
            <el-form-item label="创建时间">
                {{ware.deteTime}}
            </el-form-item>
            <el-form-item label="状态">
               <span v-if="ware.status==0">已关闭</span>
                <span v-if="ware.status==1">已开启</span>
            </el-form-item>
            <el-form-item label="仓库详情">
                <el-input type="textarea" v-model="ware.details"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onUpdate">修改</el-button>
                <el-button @click="onCancle">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--下半部分的仓库表格展示-->
    <el-row style="padding-top: 30px">
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <!--左侧固定列:序号-->
            <el-table-column
                    fixed="left"
                    label="序号"
                    width="300">
                <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column
                    label="仓库编号"
                    width="120">
                <template slot-scope="scope">{{ scope.row.wareNo }}</template>
            </el-table-column>
            <el-table-column
                    label="仓库名称"
                    width="120">
                <template slot-scope="scope">{{ scope.row.wareName }}</template>
            </el-table-column>
            <el-table-column
                    label="负责人"
                    width="120">
                <template slot-scope="scope">{{ scope.row.person }}</template>
            </el-table-column>
            <el-table-column
                    label="联系电话"
                    width="150">
                <template slot-scope="scope">{{ scope.row.telephone }}</template>
            </el-table-column>
            <el-table-column
                    label="货区数目"
                    width="120">
                <template slot-scope="scope">{{ scope.row.cargoNum }}</template>
            </el-table-column>
            <!--货架数目 从货架管理表中查询-->
            <el-table-column
                    label="货架数目"
                    width="120">
                <template slot-scope="scope">{{ scope.row.shelveNum }}</template>
            </el-table-column>
            <!--货位数目 从货架管理表中查询-->
            <el-table-column
                    label="货位数目"
                    width="120">
                <template slot-scope="scope">{{ scope.row.cgoNum }}</template>
            </el-table-column>
            <!--空余货位 需要连表查询出-->
            <el-table-column
                    label="空余货位"
                    width="120">
                <template slot-scope="scope">{{ scope.row.emptyCargoNum }}</template>
            </el-table-column>
            <el-table-column
                    label="仓库描述"
                    width="200">
                <template slot-scope="scope">{{ scope.row.details }}</template>
            </el-table-column>
            <el-table-column
                    label="创建时间"
                    width="150">
                <template slot-scope="scope">{{ scope.row.deteTime}}</template>
            </el-table-column>
            <el-table-column
                    label="状态1"
                    width="120" >
                <template slot-scope="scope"><span v-if="scope.row.status==1" style="background-color: #85ce61;height:20px;width:40px;color:#FFFFFF">启用</span>
                <span v-if="scope.row.status==0" style="background-color:gainsboro;height:20px;width:40px;color:#FFFFFF">关闭</span>
                </template>
            </el-table-column>

            <!--右侧固定列:操作-->
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="200">
                <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="success"
                        @click="editStatus(scope.$index, scope.row)"><i class="el-icon-success">启用</i></el-button>
                <el-button
                        size="mini"
                        type="success"
                        @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit">编辑</i></el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>

    <!--分页文字提示  以及  分页按钮-->
    <el-row type="flex" class="row-bg" justify="space-between" style="padding-top: 10px">
        <el-col :span="6">
            <div class="tips">
                第<span>{{(current-1)*pageSize + 1}}</span>到第<span>{{(current-1)*pageSize + pageSize}}</span>条记录,共<span>{{total}}</span>条
            </div>
        </el-col>
        <!--分页-->
        <el-col :span="16" style="text-align: right">
            <!--<el-pagination
                    background
                    layout="prev, pager, next"
                    @current-change="loadPage"
                    :current-page="current"
                    :page-size="pageSize"
                    :total="total">
            </el-pagination>-->
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="loadPage"
                    :current-page="current"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-col>
    </el-row>

</div>

<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                /*表单数据*/
                wareNoAndTime: {
                    wareNo: '',
                    date:''
                },

                tableData:null,
                ware:{
                    id: '',
                    wareNo: '',
                    wareName: '',
                    person: '',
                    telephone:'',
                    cargoNum: '',
                    details:'',
                    shelveNum: '',
                    cgoNum:'',
                    emptyCargoNum: '',
                    deteTime: null,
                    status: '',
                    address:'',
                    place:''
                },
                /*日期选择器设置*/
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                /*新增仓库对话框表单*/
                dialogFormVisible: false,
                dialogOtherFormVisible:false,
                formLabelWidth: '120px',
                addWareForm: {
                    newWareName: '',
                    newWareRegion: ''
                },
                /*对话框表单规则*/
                rules: {
                    newWareName: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                    ],
                    newWareRegion: [
                        {required: true, message: '请选择活动区域', trigger: 'change'}
                    ]
                },
                /*搜索框*/
                search: '',

                /*分页模块*/
                //当前页数
                current: 1,
                //每页显示条目个数
                pageSize: 5,
                //总条目数
                total:0,
                wares:[],
                users:null
            }
        },
        methods: {
            /*=====提交表单，传输表单数据=====*/
            onSubmit() {
                this.current=1;
                this.total=0,
                this.pageSize=5,
                axios.post("/wares/"+this.current+"/"+this.pageSize,this.wareNoAndTime).then(value=>{
                        this.tableData = value.data.data.records;
                        this.current = value.data.data.current;
                        this.total = value.data.data.total;
                })


                },

            /*表单重置*/
            resetForm() {
                this.wareNoAndTime={};
                this.loadPage(1);
                // this.$refs[formName].resetFields();
            },
            /*=====对话框表单提交重置功能=====*/
            submitAddForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.dialogFormVisible=false;
                        alert('添加成功!');
                    }else{
                        return false;
                    }
                });
            },
            resetAddForm(formName) {
                this[formName] = {}
            },
            /*=====搜索框搜索=====*/
            searchWare(search) {

            },
            /*分页跳转功能*/
            handleSizeChange(val) {
                this.pageSize=val;
                this.loadPage(1);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            loadPage(current) {
                this.current = current;
                axios.post("/wares/"+current+"/"+this.pageSize,this.wareNoAndTime).then(value => {
                    if (value.data.code == 1) {

                        this.tableData = value.data.data.records;
                        this.current = value.data.data.current;
                        this.total = value.data.data.total;
                        this.wares=[];
                    for (var i = 0; i < this.tableData.length; i++) {

                        var ware={
                                'wareName':this.tableData[i].wareName,
                                'wareNo':this.tableData[i].wareNo
                        }
                        this.wares.push(ware);
                    }
                    }
                })
            },
            openFormDialog(){
                this.dialogFormVisible = true;
                axios.get("/usersname").then(value=>{
                    this.users=value.data.data;
                });
            },
            onAdd(){
                axios.post("/ware",this.ware).then(value=>{
                    this.dialogFormVisible=false
                    this.loadPage(this.current);
                });
                this.ware={
                    id: '',
                    wareNo: '',
                    wareName: '',
                    person: '',
                    telephone:'',
                    cargoNum: '',
                    details:'',
                    shelveNum: '',
                    cgoNum:'',
                    emptyCargoNum: '',
                    deteTime: null,
                    status: '',
                    address:'',
                    place:''
                }
            },
            handleEdit(index,row){
                this.dialogOtherFormVisible=true;
                axios.get("/usersname").then(value=>{
                this.users=value.data.data;
            });
                this.ware=row;
                this.ware.deteTime=row.deteTime;

            },
            editStatus(index,row){
                this.$confirm('是否要修改?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.put("/ware/"+row.id+"/"+row.status);
                    this.loadPage(this.current);
                    this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
            }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消修改'
                });
            });
            },
            onUpdate(){
                axios.put("/ware/"+this.ware.id,this.ware).then(value=>{

                });
                this.dialogOtherFormVisible=false
                this.loadPage(this.current);
            },
            cancelbtn(){
                this.dialogFormVisible=false;
                this.loadPage(1);
            },
            onCancle(){
                this.dialogOtherFormVisible=false;
                this.loadPage(this.current);
            }
            //生成时间
           /* generateDate() {
                var date = new Date();
                var seperator1 = "-";
                var seperator2 = ":";
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + " " + date.getHours() + seperator2 + date.getMinutes()+ seperator2 + date.getSeconds();
                this.ware.deteTime=currentdate;
            }*/
        },
        /*挂载*/
        mounted(){
          this.loadPage(1)

        },
    })
</script>
</body>
</html>